<template>
  <common-card class="teaching-quality">
    <template #title
      >教学质量分析
      <span ref="tooltipRef" class="tooltip-wrapper">
        <a-tooltip placement="bottom" :getPopupContainer="() => tooltipRef">
          <template #title>
            <div class="overlay-content">
              <span>低于年级平均值时数据标红</span>
            </div>
          </template>
          <label class="explain-icon"></label>
        </a-tooltip> </span
    ></template>
    <!-- <template #operate
      ><span class="operate"
        ><span class="operate__desc">详情</span
        ><label class="operate__icon"></label></span
    ></template> -->
    <div class="table">
      <a-table
        :columns="CLASS_TEACHING_QUALITY"
        :dataSource="dataList"
        :pagination="false"
        :scroll="{ y: 300 }"
      >
      </a-table>
    </div>
  </common-card>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { CLASS_TEACHING_QUALITY } from '../constant'
import { ref } from 'vue'
const tooltipRef = ref(null)
const dataList = ref([
  {
    chapter: '第四单元 分数的意义和性质',
    num_class_name: 8,
    num_avg: 8,
    right_class_name: '88.3%',
    right_avg: '88.7%'
  },
  {
    chapter: '第一课时 分数的意义（一）',
    num_class_name: 9,
    num_avg: 9,
    right_class_name: '85.2%',
    right_avg: '87.3%'
  },
  {
    chapter: '第一课时 分数的意义（二）',
    num_class_name: 9,
    num_avg: 9,
    right_class_name: '87.4%',
    right_avg: '86.1%'
  }
])
</script>
<style lang="less" scoped>
@import '../style.less';

.teaching-quality {
  :deep(.ant-select) {
    max-width: 166px;
    min-width: 150px;

    .ant-select-selector {
      border-radius: @small-radius;
    }
  }

  .operate {
    &__icon {
      margin-left: 4px;
      background: url('@/assets/images/situation-report/right-arrow.png')
        no-repeat center/cover;
    }
  }
}
</style>
